import React, { Component } from 'react'
import Icon from 'react-native-vector-icons/FontAwesome';
import { ScrollView, View, StyleSheet, Text, TouchableOpacity, FlatList, Alert, Image, Dimensions, Animated, } from 'react-native'
import { pxPage } from '../../common/CommonUtil'
import { throttle, globalColor } from '../../common/Common'
import { Header } from 'react-native-elements';//可以用来写title
import { connect } from 'react-redux';
import { getCollection, delCollection } from '../../redux/actions/Collection_action';

const MyHeader = ({ props }) => {
    return <Header
        backgroundColor='#fea6c4'
        leftComponent={
            <TouchableOpacity
                onPress={throttle(() => {
                    props.navigation.goBack()
                }, 2000)}>
                <Icon size={30} name="angle-left" style={{ color: '#fff' }} />
            </TouchableOpacity>
        }
        centerComponent={
            <Text style={{ color: '#fff', fontSize: 18, fontWeight: '400', textAlign: 'center', }}>我的追剧</Text>
        }
    // rightComponent={
    //     <Text style={{ color: '#fff', fontSize: 13, textAlign: 'center' }}>长按删除</Text>
    // }
    />
}
class Mycollection extends Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.props.dispatch(getCollection(this.props.login.data.user_id))
    }

    render() {
        if (this.props.login.login == false) {
            return <View style={styles.container}>
                {/* 头部 */}
                <MyHeader props={this.props} />
                <View style={{
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginTop: pxPage(40),
                    flexDirection: 'row'
                }}>
                    <Text style={{ color: '#999', fontSize: 14 }}>您还没有登录呢，点击 </Text>
                    <TouchableOpacity
                        onPress={throttle(() => {
                            this.props.navigation.push('Login')
                        }, 200)}>
                        <Text style={{ color: "#f1687a", fontWeight: 'bold', fontSize: 16 }}>登录</Text>
                    </TouchableOpacity>

                </View>
                <Image resizeMode={'cover'} style={{
                    height: pxPage(500),
                    width: pxPage(500)
                }} source={require('../../common/icon/离线缓存.jpg')} />

            </View>
        } else
            return (
                <View style={styles.container}>
                    <View>
                        {/* 头部 */}
                        <MyHeader props={this.props} />
                    </View>

                    {/* 我的收藏列表 */}
                    <ScrollView style={{ paddingTop: pxPage(10) }}>
                        {this.props.collection?.map((item, index) => {
                            return <View
                                onPress={throttle(() => {
                                    this.props.navigation.navigate('Detail', {
                                        item: item
                                    })
                                }, 2000)}
                                onLongPress={() => {
                                    Alert.alert(
                                        "编辑收藏列表",
                                        "您确定要删除这项收藏吗?",
                                        [
                                            {
                                                text: "取消",
                                                onPress: () => console.log("Cancel Pressed"),
                                                style: "cancel"
                                            },
                                            {
                                                text: "确定",
                                                onPress: () => {
                                                    delCollection(this.props.login.data.user_id, item.id)
                                                    console.log("删除收藏项")
                                                }
                                            }
                                        ]
                                    );
                                }}
                                key={index} style={{ marginBottom: pxPage(15) }}>
                                <View style={{
                                    flexDirection: "row",
                                    height: pxPage(190),
                                    alignContent: 'center',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    marginTop: pxPage(10),
                                    marginBottom: pxPage(10)

                                }}>
                                    {/* 动漫封面部分 */}
                                    <Image
                                        style={{
                                            width: pxPage(126),
                                            height: pxPage(171),
                                            borderWidth: 1.5,
                                            borderColor: '#F1687A',
                                            shadowColor: '#999',
                                            borderWidth: 1,
                                            borderColor: '#F1687A',
                                        }}
                                        source={{ uri: item.img }}></Image>

                                    {/* 文字简介部分 */}
                                    <View style={{
                                        width: pxPage(245), height: pxPage(171), paddingLeft: pxPage(15)
                                    }}>
                                        {/* 动漫名 */}
                                        <Text style={{
                                            fontWeight: 'bold',
                                            fontSize: 14,
                                            marginBottom: pxPage(10)
                                        }}>{item.name}</Text>
                                        {/* <TouchableOpacity>
                                            <Image style={{
                                                height: pxPage(25),
                                                width: pxPage(25),
                                                // position: 'absolute',
                                                // right: pxPage(0),
                                                // top: pxPage(-20)
                                            }} source={require('../../common/icon/删除.png')} /></TouchableOpacity> */}


                                        <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>类型: {item.type}</Text>
                                        <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>分类: {item.region} {item.lndexes} {item.label}</Text>
                                        <Text style={{ fontSize: 13, color: '#888' }}>简介: {item.introduction?.length <= 60 ? item.introduction : item.introduction.slice(0, 60) + '...'}</Text>

                                    </View>
                                </View>

                                {/* 分集部分 */}
                                <View style={{
                                    flexDirection: 'row',
                                    alignItems: 'center',
                                    marginLeft: pxPage(20)
                                }}>

                                    <View style={{
                                        flexDirection: 'row',
                                        alignItems: 'center',
                                    }}>
                                        <Image style={{
                                            width: pxPage(25),
                                            height: pxPage(25),
                                            marginRight: pxPage(5)
                                        }}
                                            source={require('../../common/icon/花.png')}></Image>
                                        {/* 剧集更新情况 */}
                                        <Text style={{
                                            fontSize: 15,
                                        }}>{item.synopsis.split('，')[0]}</Text>
                                    </View>

                                    {/* 删除按钮 */}
                                    <View style={{ flexDirection: 'row', position: 'absolute', right: pxPage(10) }}>
                                        <Btn title={'删除'} img={require('../../common/icon/播放.png')}
                                            onPress={() => {
                                                Alert.alert(
                                                    "编辑收藏列表",
                                                    "您确定要删除这项收藏吗?",
                                                    [
                                                        {
                                                            text: "取消",
                                                            onPress: () => console.log("Cancel Pressed"),
                                                            style: "cancel"
                                                        },
                                                        {
                                                            text: "确定",
                                                            onPress: () => {
                                                                // console.log(this.props.login.data.user_id)
                                                                // console.log(item.id)
                                                                delCollection(this.props.login.data.user_id, item.id)
                                                                console.log("删除收藏项")

                                                            }
                                                        }
                                                    ]
                                                );
                                            }}
                                            color={'#ccc'}
                                        />
                                        {/* 查看详情按钮 */}
                                        <Btn title={'查看详情'} img={require('../../common/icon/播放.png')}
                                            onPress={throttle(() => {
                                                this.props.navigation.navigate('Detail', {
                                                    item: item
                                                })
                                            }, 2000)}
                                            color={'pink'}
                                        />
                                    </View>

                                </View>
                            </View>
                        })}
                        <View style={{ height: pxPage(120) }}></View>
                    </ScrollView>
                </View>

            )
    }
}

const mapStateToProps = state => ({
    login: state.login,
    collection: state.collection
})

// const mapDispatchToProps = dispatch => ({
//     delCollection: () => dispatch(delCollection())
// })

export default connect(mapStateToProps)(Mycollection)

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        backgroundColor: '#fff',
        // alignItems: 'center'
    },
    item: {
        width: Dimensions.get('window').width,
        marginLeft: pxPage(15),
        marginBottom: pxPage(20)
    },
    name: {
        fontSize: 14,
        marginTop: pxPage(5),
        marginRight: pxPage(11),
        fontWeight: 'bold'
    },
    type: {
        color: 'rgb(255,91,145)',
        fontSize: 12,
        textAlign: 'center'
    },
    type2: {
        color: 'rgb(177,156,35)',
        fontSize: 12,
        textAlign: 'center'
    },
    alias: {
        fontSize: 13,
        width: pxPage(260),
        marginLeft: pxPage(15),
        marginTop: pxPage(8),
        color: 'rgb(112,107,109)',
        fontWeight: 'bold'
    },
    similar: {
        color: 'rgb(177,156,35)',
        fontSize: 12,
        textAlign: 'center',

    },
    pic: {
        width: pxPage(90),
        height: pxPage(120),
        borderRadius: 3
    }
});

const Btn = (obj, img, onPress, color) => {
    return <TouchableOpacity style={{
        marginLeft: pxPage(20),
        // marginRight: pxPage(30),
        height: pxPage(42),
        width: pxPage(100),
        backgroundColor: obj.color,
        flexDirection: 'row',
        borderRadius: 14,
        justifyContent: 'center',
        alignItems: 'center',
        elevation: 1.5,
        shadowColor: '#fff',
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 1,
        shadowRadius: 1.5,
    }}
        onPress={obj.onPress}>
        {/* <Image style={{
            width: pxPage(20),
            height: pxPage(20),
            // marginRight: pxPage(1),
        }} source={obj.img}></Image> */}
        <Text style={{ color: '#fff' }}>{obj.title}</Text>
    </TouchableOpacity>
}


